<template>
  <div>
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
      >全部显示</el-checkbox
    >
    <div style="margin: 15px 0"></div>
    <el-checkbox-group
      v-model="checkedSource"
      @change="handleCheckedSourceChange"
    >
      <el-checkbox v-for="item in source" :label="item" :key="item">{{
        item
      }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>


<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      checkAll: true,
      checkedSource: [],
      isIndeterminate: true,
      source: []
    };
  },
  computed: {
    ...mapGetters(["activePageForm"]),
  },
  mounted() {
    const mapSoruce = {
      gerenxinxi: ['余额', '卡券', '积分']
    }
    const module = this.activePageForm.modules[this.activePageForm.activeModuleIndex]
    this.source = mapSoruce[module.type]
    typeof module.biz.params === 'string' && (module.biz.params = JSON.parse(module.biz.params))
    module.biz.params?.isShow && (this.checkedSource = module.biz.params.isShow)
  },
  methods: {
    handleCheckAllChange(val) {
      this.checkedSource = val ? this.source : [];
      this.isIndeterminate = false;
      const module = this.activePageForm.modules[this.activePageForm.activeModuleIndex]
      module.biz.params.isShow = this.checkedSource
    },
    handleCheckedSourceChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.source.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.source.length;
      const module = this.activePageForm.modules[this.activePageForm.activeModuleIndex]
      module.biz.params.isShow = this.checkedSource
    },
  },
};
</script>
